<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html lang="en">

<html>

<head>

<link rel="Stylesheet" type="text/css" href="css/Stylesheet.css">

</head>

<body>


<h1></h1>

<ul id="menu" align=center>
  <li><form id=NoBox action="LoginPage.htm" method="post"><input id="NoBox" type="submit" name="Login" value="Login" /></form></li>
  <li><form id=NoBox action="VisitorRegistrationPage.htm" method="post"><input id="NoBox" type="submit" name="New Visitor" value="New Visitor" /></form></li>
</ul>

<form action="VisitorRegistration.htm" method="post">

<h2>Festival Registration System</h2>

<h3>New Visitor Registration Page</h3>

<table align=center>
    <tr>
		<td><label for="firstname">First Name: </label></td>
		<td><input type="text" name="firstname" id="firstname" placeholder="Enter your first name" required="required" 
		autofocus="autofocus" minlength="1" maxlength="30"></td>
	</tr>
	
	<tr>
		<td><label for="lastname">Last Name: </label></td>
		<td><input type="text" name="lastname" id="lastname" placeholder="Enter your last name" required="required" autofocus="autofocus" minlength="1" maxlength="30"></td>
     </tr>
  
     <tr>
		<td><label for="dni">DNI: </label></td>
		<td><input type="text" name="dni" id="dni" placeholder="00.000.000-X" required="required" autofocus="autofocus" 
		pattern="[0-9]{2}[.]{1}[0-9]{3}[.]{1}[0-9]{3}-[A-Z]{1}" title="Please enter with this format: 00.000.000-X"></td>
     </tr>
	 
     <tr>

		<td><label for="username">User Name: </label></td>
		<td><input type="text" name="username" id="username" placeholder="Enter your user name" required="required" autofocus="autofocus" minlength="6" maxlength="12"></td>
	</tr>
	 
     <tr>


		<td><label for="password">Password: </label></td>
		<td><input name="password" required="required" type="password" id="password" placeholder="Enter your password" required="required" autofocus="autofocus" minlength="6" maxlength="15"></td>
	</tr>
	<tr>
		<td><label for="confirmpassword">Confirm Password: </label></td>
		<td><input name="password_confirm" required="required" type="password" id="password_confirm" oninput="check(this)"  placeholder="Confirm your password" required="required" autofocus="autofocus" minlength="6" maxlength="15"><td>

     </tr>

<script language='javascript' type='text/javascript'>
function check(input) {
if (input.value != document.getElementById('password').value) {
input.setCustomValidity('Password Must be Matching.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>

<tr>

<td><label for="emailAddress">Email address: </label></td>
<td><input type="email" name="emailAddress" id="emailAddress" placeholder="name@example.com" required="required" autofocus="autofocus" minlength="3" maxlength="200" /></td>

</tr>
<tr>
<td><label for="phone">Phone Number: </label></td>
<td><input type="text" name="phone" id="phone" placeholder="Enter your phone number" required="required" autofocus="autofocus" minlength="10" maxlength="20" pattern="[0-9]{10,}" title="Please enter a valid phone number" /></td>

</tr>
<tr>

<td><label for="addres">Address: </label></td>
<td><input type="text" name="addres" id="addres" placeholder="Enter your address" required="required" autofocus="autofocus" maxlength="30" /></td>

</tr>

<td></td><td></td>

<tr>
</tr>



<tr>
<td></td><td><input type="submit" name="Accept" value="Accept"align=center/>
<button type="reset" align="center" >Cancel</button>
</td>
</tr>

</table>

</form>

<% String error = (String) request.getAttribute("error"); %>

<%if(error!=null){ %>
<script> 
alert ("<%=error%>");
</script>

<% request.setAttribute("error",null);} %>

</body>
</html>
